<template>
  <div class="card-node" :class="'card-node__'+originShape">
    <div class="title">{{dialogData.name}}</div>

    <div class="progress-wrapper">
      <label-progress :current-count="dialogData.enterCount"
                      :total="dialogData.enterCount"
                      label="累计进入（人次）" />
    </div>

    <div class="progress-wrapper" v-if="showReachCount()">
      <label-progress :current-count="dialogData.reachCount"
                      :total="dialogData.enterCount"
                      label="触达成功（人次）" />
    </div>
  </div>
</template>

<script>
import LabelProgress from "./labelProgress.vue";
export default {
  components: {LabelProgress},
  inject: ["getGraph", "getNode"],
  data() {
    return {
      node: {},
      dialogData: {},
      originShape: '',
    }
  },

  mounted() {
    this.node = this.getNode()

    const data = this.node.getData()
    this.dialogData = data.dialogData
    this.originShape = data.originShape

    this.resizeGraphNode()
  },

  methods: {
    resizeGraphNode() {
      this.$nextTick(() => {
        const cardNodeWrapper = document.querySelector('.card-node__' + this.originShape)
        if (cardNodeWrapper) {
          const rect = cardNodeWrapper.getBoundingClientRect()
          const wrapperHeight = cardNodeWrapper.scrollHeight
          this.node.resize(rect.width, wrapperHeight)
        }
      })
    },

    showReachCount() {
      // 动作节点 才有触达数据
      return this.originShape.toLowerCase().includes('action')
    },
  }

}
</script>

<style scoped lang="scss">
.card-node {
  width: 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
  padding: 13px 16px;

  .title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 13px;
    font-size: 16px;
  }
}

//.card-node__end {
//  width: 160px;
//  height: 70px;
//  display: flex;
//  align-items: center;
//  justify-content: center;
//  font-size: 16px;
//  font-weight: bold;
//
//  .pause-icon {
//    width: 20px;
//  }
//
//  >span {
//    margin-left: 9px;
//  }
//}

//.progress-wrapper:not(:last-child) {
//  margin-bottom: 12px;
//}

.progress-wrapper {
  margin-bottom: 12px;
}
</style>
